<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

</head>
<body>
<form action="" class="">
    <div class="form-group">
        <label for="inputUsername">用户名</label>
        <input id="inputUsername" type="text" class="form-control" name="username">
    </div>
    <div class="form-group">
        <label for="inputPassword">密码</label>
        <input id="inputPassword" type="password" class="form-control" name="password">
    </div>
    <div class="form-group">
        <label for="inputFile">file</label>
        <input id="inputFile" type="file" class="form-control" name="file">
    </div>
    <div class="form-group">
        <label>
            <input type="checkbox" id="checkme">checkmeout
        </label>
    </div>
    <input type="submit" class="btn bg-primary">
</form>

<hr>
<!--内联 form-inline-->
<form action="explain.html" class="form-inline" method="get">
    <div class="form-group">
        <label for="inpUsername">username</label>
        <input type="text" id="inpUsername" class="form-control" placeholder="username" name="username">
    </div>
    <div class="form-group">
        <label for="inppassword">password</label>
        <input type="password" id="inppassword" class="form-control" placeholder="password" name="password">
    </div>
    <input type="submit" class="btn btn-default" value="提交">
</form>

<hr>

<!--form-inline把所有的元素放到一行，放不完就自动换行。-->
<form class="form-inline">
    <!--form-group  是把label 和input放到一组，-->
    <div class="form-group">
        <label for="iUsername">username</label>
        <!--form-control 很好用。-->
        <input type="text" id="iUsername" class="form-control" name="usernmae">
    </div>
    <!--隐藏label，每一个input都需要有label标签，如果不想让其显示，用class=sr-only-->
    <div class="form-group">
        <label for="forInCount" class="sr-only">Amount</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" id="forInCount" placeholder="please input money">
            <div class="input-group-addon">.00</div>
        </div>
    </div>
    <div class="form-group">
        <label for="inpuMoney" class="sr-only">money</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" id="inpuMoney" name="in" class="form-control" placeholder="money">
            <div class="input-group-addon">.00</div>
        </div>
    </div>
</form>
<hr color="red">
<!--水平排列的表单 每一组input都占用一行，利用栅格形式， 必须要用 col-sm等等的栅格系统，，，，-->
<form action="" class="form-horizontal">
    <div class="form-group">
        <!--controll-label为了和下面的input框进行对齐-->
        <label for="inpuUsername" class="col-sm-3 control-label">username</label>
        <div class="col-sm-9">
            <input type="text" id="inpuUsername" class=" form-control" >
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="inpuPassword">password</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" id="inpuPassword" name="pass" placeholder="password">
        </div>
    </div>
    <div class="form-group">
        <div class=" col-sm-3"></div>
        <div class="col-sm-9">
            <label >
                <input type="checkbox">对吗
            </label>
        </div>
    </div>
    <!--提交按钮-->
    <form action="" class="form-group">
        <label for="sumit" class="sr-only">caicaikana</label>
        <input type="submit" id="sumit" class="btn btn-default col-sm-offset-3" value="submit">
    </form>
</form>
<hr>
<hr>
<form action="explain.html" method="get">
    <!--多选 -->
    <div class="checkbox">
        <label >
            <input type="checkbox"  name="1" value="1">完颜阿骨打
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="1" value="1">耶律阿保机
        </label>
    </div>
    <!--无效 disable让checkbox不可选中-->
    <div class="checkbox disabled">
        <label >
            <input type="checkbox" name="2" value="2">成吉思汗
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="radio1" value="tadi">单选按钮
        </label>
    </div>
    <div class="radio disabled" >
        <label>
            <input type="radio"name="radio1" value="tedi">单选按钮2
        </label>
    </div>

    <hr>
    <!--内联单选-->
    <label class="radio-inline">
        <input type="radio" name="radio1" value="12">野狼
    </label>
    <label class="radio-inline">
        <input type="radio" name="radio1" value="14">老鹰
    </label>
    <!--内联 多选-->
    <div>
        <label class="checkbox-inline">
            <input type="checkbox" name="checkbox1">成吉思汗
        </label>
        <label class="checkbox-inline" name="checkbox1">
            <input type="checkbox" name="checkbox1">秦始皇
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="chechbox1">汉武帝
        </label>
    </div>


    <div class="form-group">
        <input type="submit" class="btn btn-default" value="submit">
    </div>


</form>



</body>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
</html>